<template>
    <div>
        <div class="main-container" v-if="dialogVisible">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span><i class="el-icon-condition"></i></span>
                </div>
                <div style="min-height: 40px;">
                    <el-form :inline="true" :model="formQuery">
                        <el-form-item label="标题">
                            <el-input size="small" v-model="formQuery.title" placeholder="标题"></el-input>
                        </el-form-item>
                        <el-form-item label="发布人">
                            <el-input size="small" v-model="formQuery.addUser" placeholder="发布人"></el-input>
                        </el-form-item>
                        <el-form-item label="分类">
                            <el-select size="small" v-model="formQuery.types" placeholder="分类">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="通知" :value="1"></el-option>
                                <el-option label="公告" :value="2"></el-option>
                                <el-option label="新闻" :value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-select size="small" v-model="formQuery.status" placeholder="发布状态">
                                <el-option label="全部" value=""></el-option>
                                <el-option label="已发布" :value="true"></el-option>
                                <el-option label="未发布" :value="false"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="onSubmit(null,null)" size="small">查询
                            </el-button>
                            <el-button type="info" icon="el-icon-refresh-left" @click="onReset" size="small">
                                重置
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
            <el-card class="table-list">
                <div slot="header" class="clearfix">
                    <span><i class="el-icon-table-list" style="font-weight: 600;margin-top: 8px;"></i></span>
                    <el-button class="el-icon-plus" style="float: right; padding: 3px 0;font-size: 20px" type="text"
                               @click="handleClick(null)"></el-button>
                </div>
                <div>
                    <el-table :data="tableData" height="calc(100vh - 400px)" border style="width: 100%"
                              empty-text="暂无数据" :loading="loading">
                        <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
                        <el-table-column align="center" prop="title" label="标题">
                            <template slot-scope="scope">
                                <<&nbsp;{{scope.row.title}}&nbsp;>>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="types" width="100" label="分类">
                            <template slot-scope="scope">
                                <el-tag type="info" effect="plain" size="mini" v-if="scope.row.types=== 1">通知</el-tag>
                                <el-tag type="info" effect="plain" size="mini" v-else-if="scope.row.types=== 2">公告</el-tag>
                                <el-tag type="info" effect="plain" size="mini" v-else>新闻</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="addUser" width="120" label="发布人"></el-table-column>
                        <el-table-column align="center" prop="status" label="状态" width="100">
                            <template slot-scope="scope">
                                <span v-if="scope.row.status" style="color: #92e268">已发布</span>
                                <span v-else style="color: #ff2b4a">未发布</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" fixed="right" label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row)" type="text"
                                           icon="el-icon-edit-outline"
                                           style="font-size: 18px">
                                </el-button>
                                <el-popconfirm title="确定删除吗?" style="margin-left: 10px;"
                                               @onConfirm="handleDelete(scope.row)">
                                    <el-button type="text" icon="el-icon-delete"
                                               style="font-size: 18px"
                                               slot="reference">
                                    </el-button>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div style="text-align: right;margin-top: 8px">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page="currentPage"
                                   :page-sizes="[10, 20, 50, 100]"
                                   :page-size="pageSize"
                                   layout="prev, pager, next, sizes,total"
                                   :total="total">
                    </el-pagination>
                </div>
            </el-card>
        </div>
        <notice-edit v-else @handleReBack="handleReBack" :row-data="rowData" :edit-title="editTitle"></notice-edit>
    </div>
</template>

<script>
    import NoticeEdit from "./NoticeEdit";

    export default {
        name: "NoticeManager",
        data() {
            return {
                tableData: [],
                rowData: {},
                fileDownloadAction: this.$commonUrlHttp + "api/rest/file/download/",
                currentPage: 1,
                pageSize: 10,
                total: 0,
                loading: false,
                formQuery: {
                    title: '',
                    addUser: '',
                    types: null,
                    status: null
                },
                editTitle: null,
                dialogVisible: true,
            }
        },
        components: {NoticeEdit},
        methods: {
            handleClick(param) {
                this.dialogVisible = false;
                if (param) {
                    this.editTitle = "编辑消息";
                    this.rowData = param;
                } else {
                    this.editTitle = "添加消息";
                    this.rowData = {};
                }
            },
            handleReBack(param) {
                this.dialogVisible = param;
                this.onSubmit(null, null);
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.onSubmit(null, val);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.onSubmit(val, this.pageSize);
            },
            //查询方法
            onSubmit(currentPage, pageSize) {
                this.formQuery.currentPage = currentPage ? currentPage : 1;
                this.formQuery.pageSize = pageSize ? pageSize : this.pageSize;
                this.initTableData(this.formQuery);
            },
            onReset() {
                this.formQuery = {};
            },
            handleDelete(row) {
                this.$httpDelete(this.$axiosBaseHttp, "api/rest/notice/del/" + row.id, {}).then(res => {
                    if (res.code === 200) {
                        this.$successMsg("删除成功");
                    } else {
                        this.$errorMsg("删除失败");
                    }
                    this.onSubmit(null, null);
                });
            },
            //子组件方法回调
            callBackFromSub(param) {
                this.dialogVisible = param;
                this.initTableData(this.formQuery);
            },
            //初始化表格数据
            initTableData(param) {
                this.loading = true;
                this.$httpGet(this.$axiosBaseHttp, "api/rest/notice/list/page", param).then(res => {
                    if (res.code === 200) {
                        this.total = res.data.total;
                        this.pageSize = res.data.size;
                        this.tableData = res.data.records;
                    }
                    this.loading = false;
                })
            },

        },
        mounted() {
            this.onSubmit(null, null);
        }
    }
</script>

<style scoped lang="scss">
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .clearfix > span {
        display: inline-block;
        height: 30px;
        line-height: 15px;
    }

    .el-icon-condition, .el-icon-table-list {
        font-size: 20px;
        margin: 3px 3px 3px 3px;
    }

    .table-list {
        margin-top: 10px;
    }

    .el-card {
        /deep/ .el-card__header {
            padding: 10px 15px;
        }

        /deep/ .el-card__body {
            padding: 15px;
        }
    }

    /*   .el-table .cell {
           height: 23px;

       .el-button {
           padding: 0 0;
       }
       }*/
</style>
